<template>
  <div class="home">
    <Header />
    
    <div class="banner">
      <div class="banner-content">
        <h1>摄影作品管理与展示平台</h1>
        <p>发现精彩摄影作品，参与投票与评价</p>
        <el-button type="primary" size="large" @click="goToContest">我要参赛</el-button>
        <div class="login-buttons">
          <el-button type="text" @click="$router.push('/login?tab=contestant')">参赛者登录</el-button>
          <span class="button-separator">|</span>
          <el-button type="text" @click="$router.push('/login?tab=admin')">管理员登录</el-button>
        </div>
      </div>
    </div>
    
    <div class="container" ref="photoSection">
      <div class="section-title">
        <h2>探索精彩作品</h2>
        <div class="title-underline"></div>
      </div>
      
      <div class="filter-bar">
        <el-radio-group v-model="currentType" @change="handleTypeChange" size="medium">
          <el-radio-button :label="0">全部作品</el-radio-button>
          <el-radio-button :label="1">手机摄影</el-radio-button>
          <el-radio-button :label="2">相机摄影</el-radio-button>
        </el-radio-group>
        
        <el-select v-model="sortBy" placeholder="排序方式" @change="fetchPhotos" size="medium">
          <el-option label="最新发布" value="time"></el-option>
          <el-option label="评分最高" value="score"></el-option>
          <el-option label="投票最多" value="vote"></el-option>
          <el-option label="浏览最多" value="view"></el-option>
        </el-select>
      </div>
      
      <!-- Loading状态 -->
      <div v-if="loading" class="loading-container">
        <el-skeleton :rows="6" animated />
        <el-skeleton :rows="6" animated />
        <el-skeleton :rows="6" animated />
      </div>
      
      <!-- 无数据状态 -->
      <div v-else-if="photoList.length === 0" class="empty-container">
        <el-empty description="暂无摄影作品" :image-size="200">
          <el-button type="primary" @click="fetchPhotos">刷新</el-button>
        </el-empty>
      </div>
      
      <!-- 数据展示 -->
      <el-row :gutter="30" v-else>
        <el-col :xs="24" :sm="12" :md="8" v-for="photo in photoList" :key="photo.id">
          <div class="photo-card-wrapper">
            <el-card class="photo-card" shadow="hover" @click.native="goToDetail(photo.id)">
              <div class="card-image-container">
                <img :src="photo.imgUrl" class="photo-image">
                <div class="photo-overlay">
                  <el-button type="text" class="view-btn">查看详情</el-button>
                </div>
                <div class="award-badge" v-if="photo.isWinning">
                  <i class="el-icon-trophy"></i> {{ photo.awardLevel || '获奖' }}
                </div>
              </div>
              <div class="photo-info">
                <h3 class="photo-title">{{ photo.title }}</h3>
                <div class="author-info">
                  <i class="el-icon-user"></i>
                  <span>{{ photo.author }}</span>
                </div>
                <div class="photo-stats">
                  <div class="rate-container">
                    <el-rate v-model="photo.score" disabled show-score text-color="#ff9900" score-template="{value}"></el-rate>
                  </div>
                  <div class="count-info">
                    <span><i class="el-icon-star-on"></i> {{ photo.voteCount }}</span>
                    <span><i class="el-icon-view"></i> {{ photo.viewCount }}</span>
                  </div>
                </div>
              </div>
            </el-card>
          </div>
        </el-col>
      </el-row>
      
      <div class="pagination" v-if="total > 0">
        <el-pagination
          background
          layout="prev, pager, next, jumper"
          :total="total"
          :page-size="pageSize"
          :current-page.sync="currentPage"
          @current-change="handlePageChange">
        </el-pagination>
      </div>
    </div>
    
    <footer class="footer">
      <div class="footer-content">
        <p>© 2023 PhotoPro - 摄影作品管理与展示平台</p>
      </div>
    </footer>
  </div>
</template>

<script>
import Header from '@/components/Header.vue'

export default {
  name: 'Home',
  components: {
    Header
  },
  data() {
    return {
      photoList: [],
      currentPage: 1,
      pageSize: 9,
      total: 0,
      currentType: 0,
      sortBy: 'time',
      loading: false
    }
  },
  created() {
    // 从URL参数中获取类型
    const type = this.$route.query.type
    if (type) {
      this.currentType = parseInt(type)
    }
    
    this.fetchPhotos()
  },
  methods: {
    async fetchPhotos() {
      this.loading = true
      try {
        // 构建查询参数
        const params = {
          page: this.currentPage,
          pageSize: this.pageSize
        }
        
        if (this.currentType > 0) {
          params.type = this.currentType
        }
        
        // 排序字段
        if (this.sortBy === 'score') {
          params.sort = 'score,desc'
        } else if (this.sortBy === 'vote') {
          params.sort = 'voteCount,desc'
        } else if (this.sortBy === 'view') {
          params.sort = 'viewCount,desc'
        } else {
          params.sort = 'createTime,desc'
        }
        
        const res = await this.$http.get('/photos/page', { params })
        if (res.data.code === 1) {
          this.photoList = res.data.data.records
          this.total = res.data.data.total
        }
      } catch (error) {
        console.error('获取作品列表失败', error)
        this.$message.error('获取作品列表失败')
      } finally {
        this.loading = false
      }
    },
    handleTypeChange() {
      this.currentPage = 1
      // 更新URL参数
      if (this.currentType > 0) {
        this.$router.push({ path: '/home', query: { type: this.currentType } })
      } else {
        this.$router.push({ path: '/home' })
      }
      this.fetchPhotos()
    },
    handlePageChange() {
      this.fetchPhotos()
      // 滚动到顶部
      this.$refs.photoSection.scrollIntoView({ behavior: 'smooth' })
    },
    goToDetail(id) {
      this.$router.push(`/photos/${id}`)
    },
    scrollToPhotos() {
      this.$refs.photoSection.scrollIntoView({ behavior: 'smooth' })
    },
    goToContest() {
      this.$router.push('/contest')
    }
  }
}
</script>

<style scoped>
.home {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.banner {
  background: linear-gradient(rgba(52, 73, 94, 0.8), rgba(52, 73, 94, 0.8)), url('https://img.zcool.cn/community/0164895e3e61a2a801216518b3f5fe.jpg') no-repeat center center;
  background-size: cover;
  color: white;
  padding: 100px 0;
  text-align: center;
  position: relative;
}

.banner-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}

.banner h1 {
  font-size: 42px;
  margin-bottom: 20px;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.banner p {
  font-size: 18px;
  margin-bottom: 30px;
  opacity: 0.9;
}

.login-buttons {
  margin-top: 20px;
}

.login-buttons .el-button {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.9);
}

.login-buttons .el-button:hover {
  color: #fff;
}

.button-separator {
  color: rgba(255, 255, 255, 0.7);
  margin: 0 10px;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
  flex: 1;
}

.section-title {
  text-align: center;
  margin-bottom: 40px;
}

.section-title h2 {
  font-size: 32px;
  font-weight: 700;
  color: #34495e;
  margin-bottom: 15px;
}

.title-underline {
  height: 4px;
  width: 70px;
  background-color: #3498db;
  margin: 0 auto;
}

.filter-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.photo-card-wrapper {
  margin-bottom: 30px;
  height: 100%;
}

.photo-card {
  height: 100%;
  cursor: pointer;
  transition: all 0.3s;
  overflow: hidden;
  border: none;
  border-radius: 8px;
}

.photo-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.card-image-container {
  position: relative;
  height: 240px;
  overflow: hidden;
}

.photo-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.photo-card:hover .photo-image {
  transform: scale(1.05);
}

.photo-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s;
}

.photo-card:hover .photo-overlay {
  opacity: 1;
}

.view-btn {
  color: white;
  border: 2px solid white;
  padding: 8px 15px;
  font-size: 16px;
  border-radius: 20px;
}

.award-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #f39c12;
  color: white;
  padding: 5px 10px;
  border-radius: 15px;
  font-size: 12px;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.photo-info {
  padding: 15px;
}

.photo-title {
  font-size: 18px;
  margin: 0 0 10px;
  color: #34495e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.author-info {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  color: #7f8c8d;
  font-size: 14px;
}

.author-info i {
  margin-right: 5px;
}

.photo-stats {
  display: flex;
  flex-direction: column;
}

.rate-container {
  margin-bottom: 10px;
}

.count-info {
  display: flex;
  justify-content: space-between;
  color: #7f8c8d;
  font-size: 13px;
}

.pagination {
  text-align: center;
  margin-top: 40px;
}

.loading-container, .empty-container {
  margin: 40px 0;
}

.footer {
  background-color: #34495e;
  color: white;
  padding: 20px 0;
  margin-top: 40px;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .banner {
    padding: 60px 0;
  }
  
  .banner h1 {
    font-size: 32px;
  }
  
  .banner p {
    font-size: 16px;
  }
  
  .filter-bar {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .filter-bar .el-select {
    margin-top: 15px;
    width: 100%;
  }
}
</style> 